<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://displaytag.sf.net" prefix="display"%>
 <%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>
	<link rel="stylesheet" href="<%=request.getContextPath()%>/css/displaytagex.css" type="text/css" />
<script type="text/javascript">
function fBuscarPrograma(){
	var form = document.formGestionarObservacion;
	form.action = "actionBuscarCrearProgramabyGestionarObservacion.jspx";
	form.submit();
}
function fMostrarSelect(valor){
	
	if (valor ==100) {
		$('#divlistTipoPeriodos').show();
		$('#divlistTipoCuentas').hide();
		$('#divlistModalidadFinanciera').hide();
		$('#divNombre').hide();
		$('#divSelect').hide();
	} 
	if(valor ==101){
		$('#divlistTipoPeriodos').hide();
		$('#divlistTipoCuentas').show();
		$('#divlistModalidadFinanciera').hide();
		$('#divNombre').hide();
		$('#divSelect').hide();
	}
	if(valor ==102){
		$('#divlistTipoPeriodos').hide();
		$('#divlistTipoCuentas').hide();
		$('#divlistModalidadFinanciera').show();
		$('#divNombre').hide();
		$('#divSelect').hide();
	}
	if(valor ==103){
		$('#divNombre').show();
		$('#divlistTipoPeriodos').hide();
		$('#divlistTipoCuentas').hide();
		$('#divlistModalidadFinanciera').hide();
		$('#divSelect').hide();
	}
	if (valor ==104) {
		$('#divlistTipoPeriodos').hide();
		$('#divlistTipoCuentas').hide();
		$('#divlistModalidadFinanciera').hide();
		$('#divNombre').hide();
		$('#divSelect').hide();
	}	

}
function fCargarObservacion(idPrograma){
	var form = document.formGestionarObservacion;
	form.action = "actionVerGestionarObserbacion.jspx?idPrograma="+idPrograma;
	form.submit();
}

function fCancelar(){
	$('#divListPrograma').show('Bounce');
	$('#divObservacion').hide();
}
function fCreate(){
	var form = document.formGestionarObservacion;
	form.action = "actionCreateGestionarObserbacion.jspx";
	form.submit();
}
$(window).load(function(){
	flag=$('#flag').attr('value');

	if (flag==1) {
		$('#divListPrograma').show('Bounce');
		$('#divObservacion').hide();
	
	}	
	if (flag==2) {
		$('#divListPrograma').hide();
		$('#divObservacion').show('Bounce');

	}
	
});
</script>
<div class="form-clasico" ><form:form name="formGestionarObservacion"
	action="actionGestionarObservacion.jspx" method="POST">
	<input type="hidden" id="flag" name="flag" value="${flag}">
	<fieldset><legend>OBSERVACIONES</legend>
	<div id="divListPrograma" style="display: none">
		<table >
		<tr>
			<td><label>Filtro:</label>
			</td>
			<td><select name="idFiltro" id="idFiltro"
				onchange="fMostrarSelect(this.value)">
				<option value="0"><c:out value="--Seleccionar--" />
				<option value="100"><c:out value="Tipo Periodo" /></option>
				<option value="101"><c:out value="Tipo Cuenta" /></option>
				<option value="102"><c:out value="Modalidad" /></option>
				<option value="103"><c:out value="Nombre Programa" /></option>
				<option value="104"><c:out value="Todos" /></option>
			</select></td>
		
			<td>
			<div id="divNombre" style="display: none;">
			<label>Nombre:</label><input type="text" name="buscarNombre" />
			</div>
			<div id="divlistTipoPeriodos" style="display: none;"><select
				name="idTipoPeriodos" id="idTipoPeriodos">
				<option value="0"><c:out value="--Seleccionar--" /></option>
				<c:forEach items="${listTipoPeriodos}" var="tipoPeriodo">
					<option value="${tipoPeriodo.tipoPeriodoID}"><c:out
						value="${tipoPeriodo.descripPeriodo}" /></option>

				</c:forEach>
			</select></div>
			<div id="divlistTipoCuentas" style="display: none;"><select
				name="idTipoCuentas" id="idTipoCuentas">
				<option value="0"><c:out value="-- Seleccionar --" /></option>
				<c:forEach items="${listTipoCuentas}" var="tipoCuenta">
					<option value="${tipoCuenta.tablaEspecificaID}"><c:out
						value="${tipoCuenta.descripcionCabecera}" /></option>
				</c:forEach>
			</select></div>
			<div id="divlistModalidadFinanciera" style="display: none;"><select
				name="idModalidadFinanciera" id="idModalidadFinanciera">
				<option value="0"><c:out value="-- Seleccionar --" /></option>
				<c:forEach items="${listModalidadFinanciera}" var="modali">
					<option value="${modali.tablaEspecificaID}"><c:out
						value="${modali.descripcionCabecera}" /></option>
				</c:forEach>
			</select></div>
			</td>
		
			<td ><input style="width: 95px; height: 15px" value="Buscar Programa" type="button" onclick="fBuscarPrograma()" /></td>
		</tr>
	</table>
		<display:table uid="programa" 
				name="${listPrograma}" defaultsort="1"
				defaultorder="ascending" pagesize="20"
				requestURI=""   class="dataTable">
				<display:column property="programaID"  title="Id" sortable="true" />
				<display:column property="nombrePrograma" title="Programa"  sortable="true"/>
				<display:column property="duracionPrograma" title="Duracion Programa" sortable="true"/>
				<display:column property="fechaConvocatoria" title="Fecha Convocatoria" sortable="true"/>
				<display:column property="identificadorModFinan" title="Identificador" sortable="true"/>
        		<display:column title="Ver Observacion">
            	<a href="javascript:fCargarObservacion('${programa.programaID}')"><span class="ui-icon ui-icon-circle-arrow-s" style="cursor:pointer" title="Ver Observacion"></span></a>
        		</display:column >	
          </display:table > 
	</div>
 <input type="hidden" id="mensaje" value="${mensaje}" />
<div id="divObservacion" style="display: none" >
	<table width="100%">
	    <tr>
			<td style="text-align: right;">
			<label>Tipo Observaci&oacute;n:</label></td>
			<td >
			<select name="idTipoObservacion" id="idTipoObservacion">
				<option value="0">
					<c:out value="-- Seleccionar --" />
				</option>
				<c:forEach items="${listTipoObservacion}" var="tObservacion">
					<option value="${tObservacion.tablaEspecificaID}">
						<c:out value="${tObservacion.descripcionCabecera}" />
					</option>
				</c:forEach>
			</select>
			</td>					
		</tr>
		<tr>
			<td style="text-align: right;">
			<label>Estado:</label></td>
			<td ><select name="estado"
				id="estado">
				<option value="0"><c:out value="-- Seleccionar --" /></option>
				<c:forEach items="${listEstado}" var="tEstado">
					<option value="${tEstado.detalleEstadoCabeceraID}">
						<c:out value="${tEstado.descripEstado}" />
					</option>
				</c:forEach>
			</select>
			
			</td>					
		</tr>
    
		<tr>
			<td style="text-align: right;">
			<label>Asignado a :</label></td>
			<td ><select name="asignado"
				id="asignado">
				<option value="0"><c:out value="-- Seleccionar --" /></option>
				<c:forEach items="${listAsignado}" var="asig">
						<option value="${asig.datoProyectoID}">
						<c:out value="${asig.nombreProyecto}" />
						</option>
				</c:forEach>
			</select>
			
			</td>					
		</tr>
		<tr>
		<td align="center" colspan="2"><input type="button" value="Buscar" onclick="javascript:fBuscarObservacion();" />
		<input type="button" value="Crear" onclick="javascript:fCreate();" />
		<input type="button" value="Cancelar" onclick="javascript:fCancelar();" /></td></tr>
	</table>
	<br />
	<display:table uid="observacion" 
				name="${listObservacion}" defaultsort="1"
				defaultorder="ascending" pagesize="20"
				requestURI=""   class="dataTable">
				<display:column title="Id" sortable="true" >
				<c:out value="${observacion_rowNum}"/>
									</display:column>
				<display:column property="fkIdtablaespTipoObservacion" title="Tipo Observacion"  sortable="true"/>
				<display:column property="fkIdtablaespEstado" title="Estado" sortable="true"/>
				<display:column property="fkIdtablaespPrioridad" title="Fecha Convocatoria" sortable="true"/>
				<display:column property="tema" title="Tema" sortable="true"/>
				<display:column property="datoUsuario.datoProyectoID" title="Asignado" sortable="true"/>	
				<display:column property="fechaActualizacion" title="Fecha Actualizacion" sortable="true"/>

       </display:table >          																											
	</div>
	</fieldset>
</form:form></div>

